<template>
  <view :class="theme">
    <view class="fixed" style="top: var(--window-top); left: var(--window-left); right: var(--window-right);">
      <u-image width="100%" height="460" src="/static/img/team/bg-team.png" />
    </view>

    <view class="m-30" style="z-index: 1;">
      <view class="bg-16 br-20 fd-row" style="padding: 30rpx 10rpx 30rpx 30rpx;">
        <view class="f1 fd-row oh">
          <view class="ai-center">
            <u-image radius="50%" width="100" height="100" :src="userInfo.avatar" />
            <label class="pl-12 pr-12 lh-36 mt-12 fs-20 br-6 bg-27 color-2" style="transform: skew(-12deg);">
              {{ userInfo.level_name }}
            </label>
          </view>

          <view class="f1 jc-center ml-24 oh">
            <view class="fd-row oh">
              <label class="br-8 color-26 bg-20 lh-34 width-88 jc-center">{{ ["未", "已"][userInfo.is_auth] }}实名</label>
              <text class="f1 ml-12 fs-28 fw-700 color-23 ellipsis">{{ userInfo.nickname }}</text>
            </view>
            <label class="mt-20 fs-20 color-23">
              <text>下一等级：</text>
              <text class="fs-24 fw-700 text-center width-100"
                style="font-style: italic; background-image: linear-gradient(-45deg, #cb7b54 0%, #f04033 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                {{ teamData.next_level || "-" }}
              </text>
            </label>
            <!-- <view class="mt-20">
              <view class="height-12 br-8 bg-17">
                <view class="height-100percent br-8 bg-18"
                  :style="{ transition: `all 0.3s linear`, width: `${teamData.small_real / teamData.total_number_real || 0}%` }" />
              </view>
              <label class="mt-6 fs-20">
                <text class="color-21">{{ teamData.small_real || 0 }}</text>
                <text class="color-22">/{{ teamData.total_number_real || 0 }}</text>
              </label>
            </view> -->
          </view>
        </view>
        <u-image width="200" height="144" src="/static/img/team/icon-team.png" />
      </view>

      <view class="mt-90">
        <view class="mb-50 ai-center">
          <u-image width="218" height="28" src="/static/img/team/title-1.png" />
        </view>
        <view @click="uniNavigator({ url: '/pages/client/main/subordinate' })"
          class="mb-30 fd-row bg-13 p-50 jc-sb br-12 ai-center">
          <label style="width: 254rpx;">
            <u-image width="74" height="74" src="/static/img/team/icon-1.png" />
            <text class="ml-16 mr-12 color-24 fs-28 fw-600">直推人数</text>
            <view class="p-6 br-50percent" style="background-color: rgba(255, 255, 255, 0.2);">
              <u-icon size="24" color="#fff" name="arrow-rightward" />
            </view>
          </label>

          <view class="ai-center">
            <text class="color-2 fs-32">{{ teamData.direct_count || 0 }}</text>
            <text class="color-17">总人数</text>
          </view>
          <view class="ai-center">
            <text class="color-2 fs-32">{{ teamData.direct_real || 0 }}</text>
            <text class="color-17">实名人数</text>
          </view>
        </view>
        <view class="mb-30 fd-row jc-sb bg-13 p-50 br-12">
          <label style="width: 254rpx;">
            <u-image width="74" height="74" src="/static/img/team/icon-2.png" />
            <text class="ml-16 color-24 fs-28 fw-600">团队人数</text>
          </label>
          <view class="ai-center">
            <text class="color-2 fs-32">{{ teamData.total_number || 0 }}</text>
            <text class="color-17">总人数</text>
          </view>
          <view class="ai-center">
            <text class="color-2 fs-32">{{ teamData.total_number_real || 0 }}</text>
            <text class="color-17">实名人数</text>
          </view>
        </view>
        <view class="fd-row jc-sb bg-13 p-50 br-12">
          <label style="width: 254rpx;">
            <u-image width="74" height="74" src="/static/img/team/icon-3.png" />
            <text class="ml-16 color-24 fs-28 fw-600">小区人数</text>
          </label>
          <view class="ai-center">
            <text class="color-2 fs-32">{{ teamData.small_number || 0 }}</text>
            <text class="color-17">总人数</text>
          </view>
          <view class="ai-center">
            <text class="color-2 fs-32">{{ teamData.small_real || 0 }}</text>
            <text class="color-17">实名人数</text>
          </view>
        </view>
      </view>
      <view class="mt-90">
        <view class="mb-50 ai-center">
          <u-image width="218" height="28" src="/static/img/team/title-2.png" />
        </view>
        <view class="fd-row ai-center bg-13 br-12" style="padding: 30rpx 50rpx;">

          <u-image radius="50%" width="100" height="100" :src="teamData.pid_info?.avatar || `/static/logo.png`" />
          <view class="f1 ml-24 mr-24 oh">
            <text class="color-2 fs-28 fw-700 ellipsis">邀请人：{{ teamData.pid_info?.nickname || "-" }}</text>
            <text @click="callPhone(teamData.pid_info?.mobile)" class="mt-18 color-25"
              style="text-decoration: underline;">
              Tel：{{ teamData.pid_info?.mobile || "-" }}
            </text>
          </view>
          <label class="pl-12 pr-12 fs-26 br-6 bg-27 color-2 lh-50" style="transform: skew(-12deg);">
            {{ teamData.pid_info?.level }}
          </label>
          <!-- <u-image width="74" height="80" src="/static/img/team/icon-coin.png" /> -->
        </view>
      </view>
    </view>

  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { Response } from "@/common/type";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { ref } from "vue";
const { $config = {} } = getApp().globalData || {};

const { theme } = useMapState(["theme"]);
const userInfo = ref<AnyObject>({});
const teamData = ref<AnyObject>({});

onLoad(() => {
  getTeamData();
});

const getTeamData = async () => {
  uni.showToast({ icon: "loading" });
  const { data: userInfoRes } = <unknown>(await uni.request({ url: $config.API_USER_INFO_GET })) as Response;
  userInfo.value = userInfoRes || {};
  const { data: teamDataRes } = <unknown>(await uni.request({ url: "/teamData" })) as Response;
  teamData.value = teamDataRes || {};
  uni.hideToast();
}

onPullDownRefresh(() => {
  getTeamData();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 360);
});

const callPhone = (phoneNumber: string) => {
  if (!phoneNumber) return;
  uni.makePhoneCall({ phoneNumber });
}

</script>
<style>
page {
  background-color: #11121b;
}
</style>
<style lang="scss" scoped>
// scss
</style>